@CHARSET "UTF-8";

html,body {
	padding: 0px;
	margin: 0px;
	background: #FFFFFF;
	overflow: hidden;
}

.tool-log-panel {
	background: #FFFFFF;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99;
	display: none1;
}

.tool-not-support {
	font-size: 24px;
	color: #333333;
	line-height: 48px;
}
.tool-box-size,
.tool-box {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	/* background: #EEEEEE; */
	overflow: hidden;
}
.tool-box-size{
	visible:hidden;
	z-index:0;
}

.tool-app-name {
	position: absolute;
	top: 10px;
	left: 20px;
	z-index: 9;
	width: 20%;
	min-width: 100px;
}

.tool-app-name-box {
	width: 100%;
	padding-top: 30%;
	background-image: url("img/img0.png");
	background-position: top left;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.tool-num-panel {
	position: absolute;
	top: 10px;
	left: 0px;
	right: 0px;
	text-align: center;
	height: 20%;
}

.tool-num-item {
	display: inline-block;
	width: 8%;
	height: 100%;
	background-repeat: no-repeat;
	background-image: url("img/img2.png");
	background-size: 1000% auto;
	margin-left: -1%;
	margin-right: -1%;
}

.tool-num-item.dot {
	background-position: 100% top;
}

.tool-num-item.num0 {
	background-position: 0% top;
}

.tool-num-item.num1 {
	background-position: 10% top;
}

.tool-num-item.num2 {
	background-position: 20% top;
}

.tool-num-item.num3 {
	background-position: 30% top;
}

.tool-num-item.num4 {
	background-position: 40% top;
}

.tool-num-item.num5 {
	background-position: 50% top;
}

.tool-num-item.num6 {
	background-position: 60% top;
}

.tool-num-item.num7 {
	background-position: 70% top;
}

.tool-num-item.num8 {
	background-position: 80% top;
}

.tool-num-item.num9 {
	background-position: 90% top;
}

.tool-bottom-dot {
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 40%;
	margin-left: -20%;
	overflow: hidden;
}

.tool-bottom-dot-box {
	width: 20%;
	padding-top: 20%;
	margin: 40% 40% -10% 40%;
	background: #FFF974;
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 10px 20px rgba(255, 249, 116, 1);
	-moz-box-shadow: 0px 0px 10px 20px rgba(255, 249, 116, 1);
	box-shadow: 0px 0px 10px 20px rgba(255, 249, 116, 1);
}

.tool-content-inner {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-image: url("img/img1.png");
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100% auto;
}

.tool-kd-bg {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	display: none;
}

.tool-kd-zz {
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 3%;
	margin-left: -1.5%;
	z-index: 1;
	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%;
	-moz-transform-origin: 50% 0%;
	-o-transform-origin: 50% 0%;
	/* transform: rotate(0deg);
	transform: rotate(50deg);
	transform: rotate(-50deg); */
}

.tool-kd-zz-bg {
	background-image: url("img/img3.png");
	background-position: bottom center;
	background-repeat: no-repeat;
	width: 100%;
	padding-top: 1740%;
	background-size: 100% auto;
	margin-bottom: 440%;
}

.btn {
	background: #DBDBDB;
	border-radius: 8px;
	padding: 8px 16px;
	z-index: 1;
}

.reset-btn {
	position: absolute;
	top: 20px;
	left: 20px;
}

.log {
	position: absolute;
	top: 0px;
	lefT: 0px;
	z-index: 20;
}


@media all and (orientation : landscape) {
	/*横屏*/
	.tool-box {
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
	}
}

@media all and (orientation : portrait) {
	/*竖屏*/
	.tool-box {
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
}

.screen-to-hp {
	transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

.screen-to-hp180 {
	transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}